<!--
 * @Date: 2024-11-05 14:52:55
 * @Author: LiSong
 * @LastEditors: ZHM
 * @LastEditTime: 2025-03-05 11:30:26
 * @Description: 操作列配置弹窗
-->
<template>
  <vxe-modal :="dialogAttrs" v-model="dialogState.visible" @close="handleClose">
    <div class="operate-col-panel">
      <el-alert class="operate-col-tips" type="info" :closable="false">
        <p>1、【展示个数】意思是在列上展示的按钮个数，超过数量的将收起到更多操作中</p>
      </el-alert>
      <div class="operate-col-info">
        <div class="operate-col-item">
          <label class="item-label">列名称</label>
          <el-input size="default"
            placeholder="请输入列名称"
            v-model="dialogState.columnInfo.title"
          ></el-input>
        </div>
        <div class="operate-col-item">
          <label class="item-label">列宽度</label>
          <el-input-number size="default"
            style="width: 100%;" 
            v-model="dialogState.columnInfo.width"
          ></el-input-number>
        </div>
        <div class="operate-col-item">
          <label class="item-label">固定位置</label>
          <el-select size="default"
            style="width: 100%;"
            clearable
            placeholder="请选择固定位置"
            v-model="dialogState.columnInfo.fixed"
          >
            <el-option v-for="item in TableColTypes.getFixedTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="operate-col-item">
          <label class="item-label">展示个数</label>
          <el-input-number size="default"
            style="width: 100%;" 
            v-model="dialogState.columnInfo.showNum"
          ></el-input-number>
        </div>
      </div>
      <div class="operate-col-buttons">
        <ToolbarBtnTable ref="btnTableRef"
          btnType="primary"
          :btnLink="true"
          :btnsData="dialogState.btnsData"
          visiableParamText="btnItem, row, queryParams"
        />
      </div>
    </div>
    <template #footer>
      <el-button size="default" type="primary" @click="handleConfirm">确定</el-button>
      <el-button size="default" @click="handleClose">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
import { baseAttrs } from '@/components/dialogs/cfg/base-cofig.js'
import { ref, reactive } from 'vue';

import ToolbarBtnTable from './components/ToolbarBtnTable.vue'
import { TableColTypes } from '@/base/pojo/TableColType.js'
import XEUtils from 'xe-utils';

const emits = defineEmits(['confirm'])
const props = defineProps({
  optionModel: { type: Object }
})

const dialogAttrs = reactive({
  ...baseAttrs,
  title: '操作列配置',
  width: '60%',
  height: '65%',
  showZoom: false,
  position: { top: 150 },
  showClose: true,
  fullscreen: false,
});
const dialogState = reactive({
  visible: false,
  btnsData: [],
  columnInfo: {},
})

const defaultCol = {
  field: 'operation',
  title: '操作',
  width: 110,
  align: 'center',
  fixed: 'right',
  slots: { default: 'operation' },
  buttons: [],
  showNum: 3,
  sortable: false,
}
const btnTableRef = ref()
const handleOpen = (colInfo) => {
  if (!colInfo) colInfo = JSON.parse(JSON.stringify(defaultCol))
  dialogState.btnsData = colInfo.buttons
  dialogState.columnInfo = colInfo
  dialogState.visible = true
}
const handleClose = () => {
  dialogState.visible = false
}
const handleConfirm = () => {
  const tableData = btnTableRef.value.getTableData()
  dialogState.columnInfo.buttons = tableData
  emits('confirm', XEUtils.clone(dialogState.columnInfo, true))
  dialogState.visible = false
}

defineExpose({
  handleOpen
})

</script>

<style lang="scss" scoped>
.operate-col-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  .operate-col-tips {
    margin-bottom: 8px;
    border: 0;
  }
  .operate-col-info {
    display: grid;
    padding: 0 8px;
    gap: 12px 20px;
    grid-template-columns: repeat(4, 1fr);
    min-height: 50px;
    align-items: center;
  }
  .operate-col-item {
    display: flex;
    align-items: center;
    .item-label {
      font-size: 14px;
      white-space: nowrap;
      margin-right: 12px;
    }
  }
  .operate-col-buttons {
    flex: 1;
    min-height: 100px;
  }
}
</style>